<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table#tab{
				border: 1px solid palevioletred;
				width: 500px;
				border-collapse: collapse;
			}
			#tab tr,
			#tab tr th,
			#tab tr td{
				border: 1px solid paleturquoise;
				text-align: center;
			}
			#tab tr td a{
				font-size: 12px;
				cursor: pointer;
			}
			.edit{
				color: #0000FF;
			}
			.delete{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<!--06.10今日作业
		1.整理今天内容,纸质
		2.上网查询如何更改placeholder的样式
		3.练习早上的案例(从数组数据渲染到页面)-->
		
		
		
			//2
			/*
			 ::placeholder伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
			    当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
			例：	input::-webkit-input-placeholder{
		　　			color:palevioletred;
		　　		}
			 */
			
			//3.
			<div class="box">
				<table id="tab">
					<thead>
						<tr>
							<th>ID</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<tr>
							<td>1</td>
							<td>刘晓巍</td>
							<td>18</td>
							<td>小姐姐</td>
							<td>
								<a class="edit">编辑</a>
								<a class="delete">删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		<script type="text/javascript">
			var arr=[
				{id:1,name:"刘晓巍",age:18,sex:1},
				{id:2,name:"xiaowei",age:22,sex:1},
				{id:3,name:"hahaha",age:16,sex:0},
				{id:4,name:"kaixin",age:18,sex:0},
				{id:5,name:"小薇",age:16,sex:1}
			];
			var tbody=document.getElementById("tbody");
			tbody.innerHTML="";
			var trs="";
			for(var i=0,len=arr.length;i<len;i++){
				var tr="<tr>"+
						"<td>"+arr[i].id+"</td>"+
						"<td>"+arr[i].name+"</td>"+
						"<td>"+arr[i].age+"</td>"+
						"<td>"+(arr[i].sex=="0"?"小哥哥":"小姐姐")+"</td>"+
					"<td>"+
						"<a class='edit'>编辑</a> "+"/"+
						" <a class='delete'>删除</a>"+
					"</td>"+
				"</tr>"	;
				trs+=tr;
			}
			tbody.innerHTML=trs;
		</script>
	</body>
</html>
